<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-18 17:12:25
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-31 16:38:16
 * @FilePath: \ProtocolTool\src\renderer\src\views\OneClick\RecordDetail\index.vue
-->
<script lang="ts" setup>
import TitleBar from '@/components/TitleBar/index.vue'
import TestDetail from '../components/TestDetail.vue'
import { h } from 'vue'
// @ts-ignore
import Simplebar from 'simplebar-vue'
import 'simplebar-vue/dist/simplebar.min.css'
import {
  CheckCircleTwoTone,
  CloseCircleTwoTone,
  LoadingOutlined,
  MinusCircleTwoTone
} from '@ant-design/icons-vue'
import { getTestDetailAPI } from '@/api/OneClick'
import useTestStore from '@/store/modules/oneClick'
import dayjs from 'dayjs'

const route = useRoute()
const testStore = useTestStore()
// 测试信息
const TestInfo = ref<any>({})
// 指令测试列表
const commandList = ref<any>([])
// 实时测试列表
const liveList = ref<any>([])
// Socket测试列表
const socketList = ref<any>([])
// 初始化测试列表
const initTestList = () => {
  if (TestInfo.value.protocolType === 'Socket') {
    const socketSeq = JSON.parse(TestInfo.value.runSeq)
    // 初始化Socket测试列表
    socketSeq.forEach((item: any) => {
      socketList.value.push({
        ...testStore.testItemList[item],
        status: '',
        items: []
      })
    })
    // 初始化测试子项
    TestInfo.value.itemList.forEach((item: any) => {
      const socket = socketList.value.find((i) => i.id === item.testItem)
      if (socket) {
        socket.items.push(item)
        socket.status = item.resultStatus === 99 ? -1 : 1
      }
    })
  } else {
    const { commantSeq, liveSeq } = testStore.getSequence(TestInfo.value.runSeq)
    // 初始化指令测试列表
    commantSeq.forEach((item: any) => {
      commandList.value.push({
        ...testStore.testItemList[item],
        status: '',
        items: []
      })
    })
    // 初始化实时测试列表
    liveSeq.forEach((item: any) => {
      liveList.value.push({
        ...testStore.testItemList[item],
        status: '',
        items: []
      })
    })
    // 初始化测试子项
    TestInfo.value.itemList.forEach((item: any) => {
      if (item.transportType) {
        const command = commandList.value.find((i) => i.id === item.testItem)
        if (command) {
          command.items.push(item)
          command.status = item.resultStatus === 99 ? -1 : 1
        }
      } else {
        const live = liveList.value.find((i) => i.id === item.testItem)
        if (live) {
          live.items.push(item)
          live.status = item.resultStatus === 99 ? -1 : 1
        }
      }
    })
  }
}
// 获取测试信息
const getTestDetail = async () => {
  const res = await getTestDetailAPI(+route.params.id)
  console.log(res)
  TestInfo.value = res.data
  // 反转测试项
  TestInfo.value.itemList.reverse()
  initTestList()
}
getTestDetail()
// 测试异常数量
const errorCount = computed(() => {
  if (TestInfo.value.protocolType === 'Socket') {
    return socketList.value.filter((item: any) => item.status === -1).length
  } else {
    return (
      commandList.value.filter((item: any) => item.status === -1).length +
      liveList.value.filter((item: any) => item.status === -1).length
    )
  }
})
// 测试说明
const TestDesc = computed(() => {
  if (TestInfo.value.resultStatus === 100) {
    if (errorCount.value) {
      return `测试已完成，共发现 <span class="text-danger-color">${errorCount.value}</span> 个异常测试项。`
    } else {
      return '测试已完成，未发现异常测试项。'
    }
  } else {
    if (errorCount.value) {
      return `测试已取消，共发现 <span class="text-danger-color">${errorCount.value}</span> 个异常测试项。`
    } else {
      return '测试已取消，暂未发现异常测试项。'
    }
  }
})
// 测试详情
const testDetailRef = ref()
const handleDetail = (i: any) => {
  i.desc = i.result
  testDetailRef.value.open(i)
}
</script>

<template>
  <div>
    <div class="bar unselectable">
      <TitleBar title="测试详情" />
    </div>
    <div>
      <div class="top">
        <div class="status">
          <div ref="circle" class="circle">
            <div class="inner"></div>
          </div>
          <div class="icon">
            <img src="@/assets/images/testing.png" alt="" />
          </div>
        </div>
        <div class="info">
          <div class="title">{{ TestInfo.instrName }}</div>
          <div class="date">
            <span>测试时间：{{ dayjs(TestInfo.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            <span>消耗时间：{{ `${(TestInfo.consume / 1000).toFixed(1)} 秒` }}</span>
          </div>
          <div class="desc" v-html="TestDesc"></div>
        </div>
      </div>
      <div class="list">
        <Simplebar class="scrol">
          <a-collapse :bordered="false">
            <template v-if="TestInfo.protocolType === 'MQTT'">
              <div class="sort command">指令测试</div>
              <a-collapse-panel
                v-for="item in commandList"
                :key="item.id - 1"
                :show-arrow="false"
                :collapsible="item.items.length === 0 ? 'disabled' : ''"
              >
                <template #header>
                  <div class="item">
                    <div class="status">
                      <CheckCircleTwoTone v-if="item.status === 1" two-tone-color="#52c41a" />
                      <CloseCircleTwoTone v-else-if="item.status === -1" two-tone-color="#f5222d" />
                      <a-spin
                        v-else-if="item.status === 0"
                        :indicator="
                          h(LoadingOutlined, {
                            style: {
                              fontSize: '16px'
                            },
                            spin: true
                          })
                        "
                      />
                      <MinusCircleTwoTone v-else two-tone-color="#ccc" />
                    </div>
                    <div class="label">{{ item.label }}</div>
                    <div class="desc">{{ item.desc }}</div>
                    <div class="info">
                      <span v-if="item.status === 1" class="text-success-color">正常</span>
                      <span v-else-if="item.status === -1" class="text-danger-color">异常</span>
                      <span v-else-if="item.status === 0" class="text-info-color">检测中</span>
                      <span v-else-if="item.status === -99" class="text-warning-color">
                        已取消
                      </span>
                    </div>
                  </div>
                </template>
                <div class="detail">
                  <a-steps progress-dot direction="vertical">
                    <a-step
                      v-for="i in item.items"
                      :key="i.itemId"
                      :title="i.itemName"
                      :description="i.result"
                      :status="
                        i.resultStatus === 99 ? 'error' : i.resultStatus === 1 ? 'wait' : 'finish'
                      "
                      @click="i.resultStatus === 1 || handleDetail(i)"
                    />
                  </a-steps>
                </div>
              </a-collapse-panel>
              <div v-if="liveList.length" class="sort live">实时测试</div>
              <a-collapse-panel
                v-for="item in liveList"
                :key="item.id + 11"
                :show-arrow="false"
                :collapsible="item.items.length === 0 ? 'disabled' : ''"
              >
                <template #header>
                  <div class="item">
                    <div class="status">
                      <CheckCircleTwoTone v-if="item.status === 1" two-tone-color="#52c41a" />
                      <CloseCircleTwoTone v-else-if="item.status === -1" two-tone-color="#f5222d" />
                      <a-spin
                        v-else-if="item.status === 0"
                        :indicator="
                          h(LoadingOutlined, {
                            style: {
                              fontSize: '16px'
                            },
                            spin: true
                          })
                        "
                      />
                      <MinusCircleTwoTone v-else two-tone-color="#ccc" />
                    </div>
                    <div class="label">{{ item.label }}</div>
                    <div class="desc">{{ item.desc }}</div>
                    <div class="info">
                      <span v-if="item.status === 1" class="text-success-color">正常</span>
                      <span v-else-if="item.status === -1" class="text-danger-color">异常</span>
                      <span v-else-if="item.status === 0" class="text-info-color">检测中</span>
                      <span v-else-if="item.status === -99" class="text-warning-color">
                        已取消
                      </span>
                    </div>
                  </div>
                </template>
                <div class="detail">
                  <a-steps progress-dot direction="vertical">
                    <a-step
                      v-for="i in item.items"
                      :key="i.itemId"
                      :title="i.itemName"
                      :description="i.result"
                      :status="
                        i.resultStatus === 99 ? 'error' : i.resultStatus === 1 ? 'wait' : 'finish'
                      "
                      @click="i.resultStatus === 1 || handleDetail(i)"
                    />
                  </a-steps>
                </div>
              </a-collapse-panel>
            </template>
            <template v-else>
              <a-collapse-panel
                v-for="item in socketList"
                :key="item.id"
                :show-arrow="false"
                :collapsible="item.items.length === 0 ? 'disabled' : ''"
              >
                <template #header>
                  <div class="item">
                    <div class="status">
                      <CheckCircleTwoTone v-if="item.status === 1" two-tone-color="#52c41a" />
                      <CloseCircleTwoTone v-else-if="item.status === -1" two-tone-color="#f5222d" />
                      <a-spin
                        v-else-if="item.status === 0"
                        :indicator="
                          h(LoadingOutlined, {
                            style: {
                              fontSize: '16px'
                            },
                            spin: true
                          })
                        "
                      />
                      <MinusCircleTwoTone v-else two-tone-color="#ccc" />
                    </div>
                    <div class="label">{{ item.label }}</div>
                    <div class="desc">{{ item.desc }}</div>
                    <div class="info">
                      <span v-if="item.status === 1" class="text-success-color">正常</span>
                      <span v-else-if="item.status === -1" class="text-danger-color">异常</span>
                      <span v-else-if="item.status === 0" class="text-info-color">检测中</span>
                      <span v-else-if="item.status === -99" class="text-warning-color">
                        已取消
                      </span>
                    </div>
                  </div>
                </template>
                <div class="detail">
                  <a-steps progress-dot direction="vertical">
                    <a-step
                      v-for="i in item.items"
                      :key="i.itemId"
                      :title="i.itemName"
                      :description="i.result"
                      :status="
                        i.resultStatus === 99 ? 'error' : i.resultStatus === 1 ? 'wait' : 'finish'
                      "
                      @click="i.resultStatus === 1 || handleDetail(i)"
                    />
                  </a-steps>
                </div>
              </a-collapse-panel>
            </template>
          </a-collapse>
        </Simplebar>
      </div>
      <TestDetail ref="testDetailRef" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.bar {
  // background: url(@/assets/images/topbar.png) no-repeat center center/cover;
  background: #53a3ff;
  -webkit-app-region: drag;
}
.top {
  height: 140px;
  padding: 20px 68px 0;
  display: flex;
  align-items: center;
  .status {
    position: relative;
    margin-right: 30px;

    .circle {
      background-image: linear-gradient(#266fe8 15%, rgb(0, 225, 255));
      width: 80px;
      height: 80px;
      text-align: center;
      border-radius: 40px;
      filter: blur(1px);
      box-shadow:
        0px -5px 20px 0px #266fe8,
        0px 5px 20px 0px rgb(0, 225, 255);

      .inner {
        background-color: rgb(255, 255, 255);
        width: 80px;
        height: 80px;
        border-radius: 50px;
        filter: blur(10px);
      }
    }

    .icon {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 40px;
      height: 40px;
      transform: translate(-50%, -50%);

      img {
        width: 100%;
        height: 100%;
        opacity: 0.3;
      }
    }
  }

  > .info {
    > .title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
    .date {
      color: #999;
      font-size: 14px;
      margin: 10px 0;
      span:first-child {
        margin-right: 20px;
      }
    }
    .desc {
      color: #333;
      font-size: 16px;
    }
  }
}
.list {
  height: calc(100vh - 32px - 140px);
  padding: 10px 40px;
  overflow: hidden;

  .scrol {
    height: calc(100vh - 52px - 140px);
  }
  .sort {
    color: #999;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .live {
    margin-top: 15px;
  }
  .item {
    display: flex;
    height: 40px;
    padding: 0 18px;
    align-items: center;

    &:hover {
      background-color: #f5f5f5;
    }

    .status {
      width: 32px;
    }
    .label {
      width: 120px;
      font-weight: bold;
    }
    .desc {
      font-size: 14px;
      color: #999;
    }
    .info {
      margin-left: auto;
      font-size: 15px;
      color: #333;
    }
  }
  .detail {
    margin: 0 20px;
  }
}

:deep(
    :where(.css-dev-only-do-not-override-16pw25h).ant-collapse
      > .ant-collapse-item
      > .ant-collapse-header
  ) {
  padding: 0;
}

:deep(:where(.css-16pw25h).ant-collapse > .ant-collapse-item > .ant-collapse-header) {
  padding: 0;
}

:deep(:where(.css-dev-only-do-not-override-16pw25h).ant-collapse-borderless > .ant-collapse-item) {
  border-color: #eee;
  &:nth-child(10) {
    border-bottom: none;
  }
}
:deep(:where(.css-dev-only-do-not-override-16pw25h).ant-collapse) {
  background-color: transparent;
}
:deep(:where(.css-dev-only-do-not-override-16pw25h).ant-collapse-borderless) {
  background-color: transparent;
}
:deep(:where(.css-16pw25h).ant-collapse) {
  background-color: transparent;
}

:deep(.ant-steps-item) {
  cursor: text;
}
:deep(.ant-steps-item-finish),
:deep(.ant-steps-item-error) {
  cursor: pointer;
}
:deep(
    :where(.css-dev-only-do-not-override-16pw25h).ant-steps
      .ant-steps-item:is(.ant-steps-item-finish)
      > .ant-steps-item-container[role='button']:hover
  ) {
  .ant-steps-item-title {
    color: inherit;
  }
  .ant-steps-item-description {
    color: rgba(0, 0, 0, 0.45);
  }
}
:deep(
    :where(.css-dev-only-do-not-override-16pw25h).ant-steps
      .ant-steps-item:is(.ant-steps-item-error)
      > .ant-steps-item-container[role='button']:hover
  ) {
  .ant-steps-item-title,
  .ant-steps-item-subtitle,
  .ant-steps-item-description {
    color: #ff4d4f;
  }
}
:deep(
    :where(.css-dev-only-do-not-override-16pw25h).ant-steps
      .ant-steps-item:is(.ant-steps-item-wait)
      > .ant-steps-item-container[role='button']:hover
  ) {
  .ant-steps-item-title,
  .ant-steps-item-subtitle,
  .ant-steps-item-description {
    color: rgba(0, 0, 0, 0.45);
  }
}

//

:deep(:where(.css-16pw25h).ant-collapse > .ant-collapse-item > .ant-collapse-header) {
  padding: 0;
}

:deep(:where(.css-16pw25h).ant-collapse > .ant-collapse-item > .ant-collapse-header) {
  padding: 0;
}

:deep(:where(.css-16pw25h).ant-collapse-borderless > .ant-collapse-item) {
  border-color: #eee;
  &:nth-child(10) {
    border-bottom: none;
  }
}
:deep(:where(.css-16pw25h).ant-collapse) {
  background-color: transparent;
}
:deep(:where(.css-16pw25h).ant-collapse-borderless) {
  background-color: transparent;
}
:deep(:where(.css-16pw25h).ant-collapse) {
  background-color: transparent;
}
:deep(
    :where(.css-16pw25h).ant-steps
      .ant-steps-item:is(.ant-steps-item-finish)
      > .ant-steps-item-container[role='button']:hover
  ) {
  .ant-steps-item-title {
    color: inherit;
  }
  .ant-steps-item-description {
    color: rgba(0, 0, 0, 0.45);
  }
}
:deep(
    :where(.css-16pw25h).ant-steps
      .ant-steps-item:is(.ant-steps-item-error)
      > .ant-steps-item-container[role='button']:hover
  ) {
  .ant-steps-item-title,
  .ant-steps-item-subtitle,
  .ant-steps-item-description {
    color: #ff4d4f;
  }
}
:deep(
    :where(.css-16pw25h).ant-steps
      .ant-steps-item:is(.ant-steps-item-wait)
      > .ant-steps-item-container[role='button']:hover
  ) {
  .ant-steps-item-title,
  .ant-steps-item-subtitle,
  .ant-steps-item-description {
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>
